import React, { useState } from 'react';
import './forgetpwd.css'
import { Link } from 'react-router-dom';
import { Select,Input,Button,Checkbox,message  } from 'antd'

const handleChange = (value) => {
    console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
};
const onChange = (e) => {
    console.log(`checked = ${e.target.checked}`);
};

export default function ForgetPwd() {
    let arr = [
        {
            value:'china',
            label:'中国+86'
        },
        {
            value:'',
            label:'中国+86'
        },
        {
            value:'',
            label:'中国+86'
        },
        {
            value:'',
            label:'中国+86'
        },
        {
            value:'',
            label:'中国+86'
        },

    ];
    // 初始化读秒
    let [num,setNum] = useState(60);
    // 
    let [bol,setBol] = useState(false);
    let djs = ()=>{
        if(num===60){
            let timmer = setInterval(()=>{
                // clearInterval(timmer);
                if(num>0){
                    setNum(--num);
                    // console.log( num );
                    // console.log( bol );
                }else {
                    setNum(60);
                    clearInterval(timmer);
                    setBol(false);
                }
            },1000)
        }
        
    }
    const [messageApi, contextHolder] = message.useMessage();
    const success = () => {
        messageApi.open({
        type: 'success',
        content: '验证码发送成功',
        });
    };
    const warning = () => {
        messageApi.open({
          type: 'warning',
          content: '验证码已发送，1分钟内请勿重复点击！',
        });
      };
  return (
    <>
    
    {contextHolder}
      <div className='forgetpwd-layout'>
        <div>
            <img src={require('../../static/images/logo.png')} alt="" />
        </div>
        <div>
            <ul>
                <li>
                    <h3>忘记密码</h3>
                </li>
                <li>
                    <Select
                        labelInValue
                        defaultValue={{
                          value: 'china',
                          label: '中国+86',
                        }}
                        style={{
                          width: 96,
                          height: 36
                        }}
                        onChange={handleChange}
                        options={arr}   
                    />
                    <Input 
                        style={{
                            width: 240,
                            height: 36
                        }}
                        placeholder="输入手机号"
                        type='number'
                    />
                </li>
                <li>
                    <Input 
                        style={{
                            width: 255,
                            height: 36
                        }}
                        placeholder="请输入验证码"
                    />
                    <span className={bol?'b':'a'  } onClick={()=>{
                        if(num===60){
                            setBol(!bol);
                        }
                        console.log( bol );
                        if(!bol){
                            djs();
                            success();
                        }else {
                            warning();
                        }
                        
                    }}>{bol?num+'s':'获取验证码'  }</span>
                </li>
                <li>
                    <Input.Password 
                        style={{
                            width: 345,
                            height: 36
                        }}
                        placeholder="请输入密码，包含数字和字母的8~20位密码"
                    />
                </li>
                <li>
                    <Input.Password 
                        style={{
                            width: 345,
                            height: 36
                        }}
                        placeholder="确认密码"
                    />
                </li>
                {/* <li>
                    <Checkbox onChange={onChange}
                        style={{
                            marginRight:5
                        }}
                    ></Checkbox>
                    <p>已阅读并同意<span>《用户使用协议》</span></p>
                </li> */}
                <li>
                    <Button
                        style={{
                            width: 345,
                            height: 36,
                            background:'#8479E3',
                            color:'#fff'
                        }}
                    >确认修改</Button>
                </li>
                <li>
                    {/* <p>已有帐号，立即<span><Link to="/login">登录</Link></span></p> */}
                    <p>已有帐号，立即<Link to="/login" className='aa'>登录</Link></p>
                </li>
            </ul>
            <div>
                <img src={require('../../static/images/wt.png')} alt="" />
            </div>
        </div>
        <div>
            <p>2018-2019 北京乐闻诺科技有限公司 京ICP备19041303号</p>
        </div>
      </div>
    </>
  )
}
